<template>
	<view class="content">
		<view class="row b-b">
			<view class="tit">联系人</view>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<view class="tit">昵称</view>
			<input class="input" type="text" v-model="addressData.alias" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<view class="tit">电话</view>
			<input class="input" type="number" v-model="addressData.tel" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<view class="tit">省--市--县</view>
			<input class="input" @tap="showPicker" placeholder="选择省市县" :value="area">
		</view>
		<view class="row b-b">
			<view class="tit">详细地址</view>
			<textarea class="input" placeholder="收货人详细地址" placeholder-class="placeholder" v-model="addressData.address" />
		</view>
		<!-- <view class="row b-b">
			<view class="tit">地址</view>
			<text @click="chooseLocation" class="input">
				{{addressData.addressName}}
			</text>
			<text class="yticon icon-shouhuodizhi"></text>
		</view> -->
		
		
		<view class="row default-row">
			<view class="tit">设为默认</view>
			<switch :checked="addressData.is_default=='1'" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		<w-picker
			mode="region"
			:defaultVal="defaultVal"
			:areaCode="areaCode"
			:hideArea="false"
			@confirm="onConfirm" 
			ref="region"
			:timeout="true"
		></w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components:{
			wPicker
		},
		data() {
			return {
				addressData: {},
				area:'',
				defaultVal:['北京市','东城区','东华门街道'],
				areaCode:['1','37','567']
			}
		},
		onLoad(option){
			let title = '新增收货地址';
			if(option.type==='edit'){
				title = '编辑收货地址'
				this.addressData = JSON.parse(option.data)
				let data=this.addressData;
				this.defaultVal=[data.province_name,data.city_name,data.county_name];
				this.areaCode=[data.province,data.city,data.county];
				this.area=data.province_name+' '+data.city_name+' '+data.county_name;
			}
			uni.setNavigationBarTitle({
				title
			});
		},
		methods: {
			switchChange(e){
				this.addressData.is_default=0
				if(e.detail.value){
					this.addressData.is_default=1
				}
			},
			
			//地图选择地址
			// chooseLocation(){
			// 	uni.chooseLocation({
			// 		success: (data)=> {
			// 			this.addressData.addressName = data.name;
			// 			this.addressData.address = data.name;
			// 		}
			// 	})
			// },
			
			// 省市县选择显示
			showPicker(){
				this.$refs.region.show();
			},
			// 省市县提交赋值
			onConfirm(val){
				this.addressData['province']=val.checkValue[0];
				this.addressData['city']=val.checkValue[1];
				this.addressData['county']=val.checkValue[2];
				this.area=val.result;
			},
			//提交 保存
			confirm(){
				let data = this.addressData;
				let editAddressUrl=this.requestUrl.editAddress;
				let params={
					data:data
				};
				this.util.request(editAddressUrl,'post',function(res){
					if(res.data.code==0){
						uni.showToast({
							title: res.data.msg,
							duration:1500,
							success() {
								setTimeout(()=>{
									uni.navigateBack()
								}, 800)
							}
						});
					}else{
						uni.showToast({
							title: res.data.msg,
							duration:1500,
							image:'/static/icon/error.png'
						});
					}
					
				},params);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background:#f8f8f8;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		position: relative;
		padding:20rpx 30upx 0;
		background: #fff;
		flex-direction: column;
		
		.tit{
			flex-shrink: 0;
			font-size: 30upx;
			padding:10rpx 15rpx;
			color: $uni-text-color;
		}
		.input{
			flex: 1;
			font-size: $uni-font-size-base;
			padding:15rpx;
			color: $uni-text-color;
			background: $uni-bg-color-grey;
		}
		textarea{
			width:100%;
			height: 150rpx;
			box-sizing: border-box;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $uni-text-color-grey;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size:$uni-font-size-lg;
		color: #fff;
		background-color: $uni-bg-color-zhu;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>

